<template>
  <div class="ad-login-title">
    <h2>{{ title }}</h2>
    <h6>{{ ask }}</h6>
    <a href="#" class="toggle" @click="$emit('toggleMode')">{{ toggle }}</a>
  </div>
</template>
<script lang="ts" setup>
withDefaults(
  defineProps<{
    title?: string
    ask?: string
    toggle?: string
  }>(),
  {
    title: "",
    ask: "",
    toggle: ""
  }
)
</script>
<style lang="scss" scoped>
.ad-login-title {
  h2 {
    font-size: 2.1rem;
    font-weight: 600;
    color: #151111;
  }
  h6 {
    color: #bababa;
    font-weight: 400;
    font-size: 0.75rem;
    display: inline;
  }
  .toggle {
    color: #151111;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: 0.3s;
    &:hover {
      color: #8371fd;
    }
  }
}
</style>
